<template>
  <view style="position: absolute; width: 100%; height: 100%; background-color: rgb(246,248,251)">
    <view class="top">
      <view style="display: flex; padding: 200rpx 0 0 0; justify-content: space-between">
        <view style="display: flex">
          <image
            style="width: 120rpx; height: 120rpx; border-radius: 8rpx"
            :src="avatar"
          />
          <view class="top-view">
            <view class="yonghu">{{
              userInfo.weChatName
                ? userInfo.weChatName
                : "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_HeadSculpture.png"
            }}</view>
            <!-- <view class="yonghu" v-else @click="gotoLogin()">登录</view> -->
            <!-- <button class="yonghu" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">登录</button> -->
            <view class="huiyuan">
              <image
                style="width: 40rpx; height: 40rpx; margin-right: 6rpx"
                src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_diamond.png"
              />
              <text
                >已开通<text style="color: rgb(142, 84, 244)">{{
                  notStates.length ? notStates.length : 0
                }}</text
                >家店铺</text
              >
            </view>
            <!-- <view class="zhuangtai" :class="[userInfo.state==2?'active':'']">{{userInfo.state==1?'激活':'未激活'}}</view> -->
          </view>
        </view>
        <image
          class="top-right"
          @click="gotoUserInfo()"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_SetUp.png"
        />
        <!-- <view class="top-right" @click="gotoUserInfo()">资料设置</view> -->
      </view>
      <view class="VIP" @click="gotuMember()">
         <view class="vip-left">
          <text style="font-size: 32rpx;font-weight: 700;margin-bottom: 6rpx;">会员中心</text>
          <text>智能AI创作·爆款文库·专业客服</text>
         </view>
         <image style="width: 32rpx;height: 32rpx;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_grzxin.png" mode="" />
      </view>
      <!-- <image
        class="middle"
        @click="gotuMember()"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_hyzxin.png"
      /> -->
    </view>
    <view class="bottom">
      <view class="bottom-two">
        <view class="items" @click="goShow">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_dpgli.png"
            />
            <text style="font-size: 28rpx">店铺管理</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
        <view class="items" @click="zanwu">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/home_dpsquan.png"
            />
            <text style="font-size: 28rpx">门店授权</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
        <view class="items" @click="getRecords" style="margin-bottom: 0;">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_czjlu.png"
            />
            <text style="font-size: 28rpx">充值记录</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
      </view>
      <!-- <view class="bottom-img">
        <view class="first-items" @click="gotuRanking">
          <image
            class="image"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_yybang.png"
          />
          <text>音乐榜</text>
        </view>
        <view class="first-items" @click="goShow">
          <image
            class="image"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_dpgli.png"
          />
          <text>店铺管理</text>
        </view>
        <view class="first-items" @click="matrix">
          <image
            class="image"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_jzhao.png"
          />
          <text>矩阵号</text>
        </view>
        <view class="first-items" @click="goProfile">
          <image
            class="image"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_zlku.png"
          />
          <text>资料库</text>
        </view>
      </view> -->
      <view class="bottom-content">
        <view class="items" @click="contact">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_lxkfu.png"
            />
            <text style="font-size: 28rpx">联系客服</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
        <view class="items" @click="gotoAbout">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_gywomen.png"
            />
            <text style="font-size: 28rpx">关于我们</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
        <view class="items" @click="edition">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_bblcheng.png"
            />
            <text style="font-size: 28rpx">版本历程</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
        <view class="items" @click="idea" style="margin-bottom:0;">
          <view class="items-left">
            <image
              style="width: 48rpx; height: 48rpx; margin-right: 24rpx"
              src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/urse_icon_yjfkui.png"
            />
            <text style="font-size: 28rpx">意见反馈</text>
          </view>
          <image
            style="width: 48rpx; height: 48rpx"
            src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_jiantouy.png"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useMemberStore } from "../../store/modules/member";
import { computed, ref } from "vue";
import { httpRequest } from "../../utils/http";
import { onShow, onShareAppMessage } from "@dcloudio/uni-app";
const memberStore = useMemberStore();
const avatar = ref(
  uni.getStorageSync("business").businessImg
    ? uni.getStorageSync("business").businessImg
    : "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_HeadSculpture.png"
);
const baseUrl = "https:192.168.1.102:4355";
const token = ref(uni.getStorageSync("token"));
//获取用户信息
// const getMemberProfileAPI = async() => {
// 		const res = await httpRequest('/api/busByToken','POST')
// 		memberStore.userInfo = res.data
// 		console.log(res);
//   uni.request({
// 	url:`${baseUrl}/api/douYin/userInfo`,
// 	method:'POST',
// 	success:(res)=>{
// 		console.log(res);
// 	},
//   })
// }
const userInfo = ref({});
const shop = ref([]);
onShow(() => {
  if (uni.getStorageSync("shop")) {
    shop.value = uni.getStorageSync("shop");
  }
  userInfo.value = uni.getStorageSync("business");
  avatar.value = uni.getStorageSync("business").businessImg
    ? uni.getStorageSync("business").businessImg
    : "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/user_icon_HeadSculpture.png";
  console.log(avatar.value);
  console.log(userInfo.value.phone);
});
console.log(userInfo.value.state);
const notStates = uni.getStorageSync("shop").filter((e) => {
  if (e.ka) {
    return e.ka.state == 2;
  }
});
const zanwu = () => {
  if(uni.getStorageSync('shop')[uni.getStorageSync('index')].isAccredit?true:false)return uni.showToast({
    title: '该店铺不能进行授权',
    icon: 'none'
  })
  uni.navigateTo({ url: '/pageC/index/accredit' })
}
const imageUrl = computed(() => {
  if (userInfo.value.state == 1)
    return "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huiyuan2@3x.png";
  if (userInfo.value.state == 2)
    return "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/huiyuan1@3x.png";
});
console.log(userInfo.value.state);
onShareAppMessage(() => {
  return {
    title: "店店有客",
    path: `/pages/index/index`,
    imageUrl:
      "https://www.diandianyouke.site:801/fileDataBase/static/stag/static/images/b9f43815b7fccb2443ab7c6724f0cf7.png",
  };
});
console.log(imageUrl);
const getPhoneNumber = (e) => {
  console.log(e.detail.code); // 动态令牌
  console.log(e.detail.errMsg); // 回调信息（成功失败都会返回）
  console.log(e.detail.errno); // 错误码（失败时返回）
};
const getRecords = () => {
  uni.navigateTo({ url: '/pageC/index/records' })
}
const gotoLogin = () => {
  uni.navigateTo({ url: "/pages/login/login" });
};
const gotuMember = () => {
  uni.navigateTo({ url: "/pageB/index/member" });
};
// getMemberProfileAPI()
const gotoAbout = () => {
  uni.navigateTo({ url: "/pageB/index/aboutUs" });
};
const gotoUserInfo = () => {
  uni.navigateTo({ url: "/pageB/index/userInfo" });
};
const gotuRanking = () => {
  uni.navigateTo({ url: "/pageB/index/ranking" });
};
//联系我们
const contact = () => {
  uni.navigateTo({ url: "/pageB/index/service" });
};
const goShow = () => {
  uni.navigateTo({ url: `/pageB/index/management` });
};
const matrix = () => {
  uni.showToast({ title: "敬请期待", icon: "none" });
};
const goProfile = () => {
  uni.navigateTo({ url: "/pageC/index/profile" });
};
const edition = () => {
  uni.navigateTo({ url: "/pageC/index/edition" });
};
const idea = () => {
  uni.navigateTo({ url: "/pageC/index/idea" });
};
// const gotoPush = ()=>{
// 	uni.navigateTo({
// 		url:"/pageC/index/push1"
// 	})
// }
</script>

<style scoped lang="scss">
.top {
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(250, 247, 255, 1) 0%,
    rgba(233, 219, 255, 1) 100%
  );
  padding: 0 30rpx;
  .VIP{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 690rpx;
    height: 126rpx;
    padding: 18rpx 30rpx;
    background: linear-gradient(90deg,rgba(180,94,246,1)0%,rgb(94,102,246)100%);
    border-radius: 24rpx 24rpx 0 0;
    box-sizing: border-box;
    margin: 36rpx 0;
    .vip-left{
      display: flex;
      flex-direction: column;
      color: #fff;
      font-size: 24rpx;

    }
  }
  .top-view {
    display: flex;
    flex-direction: column;
    margin-left: 24rpx;
    height: 120rpx;
  }
  .yonghu {
    height: 56rpx;
    font-size: 32rpx;
    color: rgb(142, 84, 244);
    line-height: 56rpx;
    font-weight: 400;
    // border: 1rpx solid rgb(142,84,244);
  }
  .huiyuan {
    display: flex;
    font-size: 28rpx;
    color: rgba(144, 147, 153, 1);
    font-weight: 400;
    margin-top: 12rpx;
  }
  .zhuangtai {
    width: 120rpx;
    height: 48rpx;
    background-color: rgb(109, 216, 160);
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    line-height: 48rpx;
    border-radius: 8rpx;
  }
  .top-right {
    width: 48rpx;
    height: 48rpx;
  }
  .middle {
    width: 686rpx;
    height: 160rpx;
    margin-top: 36rpx;
  }
}
.active {
  background-color: red;
}
.bottom {
  padding: 0 30rpx;
  .bottom-two{
    width: 690rpx;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 36rpx 30rpx;
    box-sizing: border-box;
    margin-bottom: 30rpx;
    .items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 108rpx;
      margin-bottom: 54rpx;
      .items-left {
        display: flex;
        align-items: center;
        color: rgb(48, 49, 51);
      }
    }
  }
  .common {
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(69, 70, 74);
    margin-top: 6rpx;
  }
  .bottom-img {
    box-sizing: border-box;
    display: flex;
    margin: 36rpx 24rpx 108rpx 24rpx;
    justify-content: space-between;
    .first-items {
      height: 128rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 24rpx;
      color: rgb(69, 70, 74);
      .image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }
  .bottom-content {
    width: 690rpx;
    padding: 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 24rpx;
    .items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      // height: 108rpx;
      margin-bottom: 54rpx;
      .items-left {
        display: flex;
        align-items: center;
        color: rgb(48, 49, 51);
      }
    }
  }
}
.hehuoren {
  position: fixed;
  bottom: 24rpx;
  left: 31rpx;
  width: 690rpx;
  height: 280rpx;
}
</style>
